<template>
  <div class="app-container">
    <el-main>
      <div>
        <el-form ref="searchForm" :inline="true" :model="searchForm" size="mini">
          <search-form-box>
            <template slot="showSearch">
              <el-form-item label="申请人" prop="name">
                <el-input v-model="searchForm.name" placeholder="请输入申请名称" size="small"/>
              </el-form-item>
              <el-form-item label="所属公司" prop="company_id">
                <el-select v-model="searchForm.company_id" placeholder="请选择公司" clearable>
                  <el-option v-for="item in companyArr" :key="item.id" :label="item.name" :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="印章类型" prop="seal_type_id">
                <el-select v-model="searchForm.seal_type_id" placeholder="请选择印章类型" size="small" clearable>
                  <el-option v-for="item in sealTypeList" :key="item.id" :label="item.name" :value="item.id"/>
                </el-select>
              </el-form-item>
              <el-form-item label="印章类型名称" prop="seal_type_name">
                <el-input v-model="searchForm.seal_type_name" placeholder="请输入印章类型名称" size="small"/>
              </el-form-item>
            </template>
            <template slot="hideSearch">
              <el-row>
                <el-form-item label="借用时间" prop="borrowing_time_start">
                  <el-date-picker
                    v-model="searchForm.borrowing_time_start"
                    type="datetime"
                    placeholder="请选择借用开始时间"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    size="small"
                  />
                </el-form-item>
                <div
                  style="height: 40px;line-height: 41px;margin-left: -10px;display: inline-block;width: 30px;text-align: center;"
                >至
                </div>
                <el-form-item prop="borrowing_time_end">
                  <el-date-picker
                    v-model="searchForm.borrowing_time_end"
                    type="datetime"
                    placeholder="请选择借用结束时间"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    size="small"
                  />

                </el-form-item>
              </el-row>
              <el-row>
                <el-form-item label="预计归还时间" prop="estimated_return_time_start">
                  <el-date-picker
                    v-model="searchForm.estimated_return_time_start"
                    type="datetime"
                    placeholder="请选择预计归还开始时间"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    size="small"
                  />
                </el-form-item>
                <div
                  style="height: 40px;line-height: 41px;margin-left: -10px;display: inline-block;width: 30px;text-align: center;"
                >至
                </div>
                <el-form-item prop="estimated_return_time_end">
                  <el-date-picker
                    v-model="searchForm.estimated_return_time_end"
                    type="datetime"
                    placeholder="请选择预计归还结束时间"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    size="small"
                  />
                </el-form-item>
              </el-row>
              <el-row>
                <el-form-item label="实际归还时间" prop="return_time_start">
                  <el-date-picker
                    v-model="searchForm.return_time_start"
                    type="datetime"
                    placeholder="请选择实际归还开始时间"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    size="small"
                  />
                </el-form-item>
                <div
                  style="height: 40px;line-height: 41px;margin-left: -10px;display: inline-block;width: 30px;text-align: center;"
                >至
                </div>
                <el-form-item prop="return_time_end">
                  <el-date-picker
                    v-model="searchForm.return_time_end"
                    type="datetime"
                    placeholder="请选择实际归还结束时间"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    size="small"
                  />
                </el-form-item>
              </el-row>
            </template>
            <template slot="searchBtn">
              <el-form-item>
                <el-button type="primary" size="small" @click="search">查询</el-button>
                <el-button size="small" @click="resetForm('searchForm')">重置</el-button>
              </el-form-item>
            </template>
          </search-form-box>
        </el-form>
      </div>

      <el-row v-if="!searchForm.is_manage_page" :gutter="20" type="flex" align="center" class="margin-tb-xs">
        <el-col>
          <el-button v-permission="'borrow_seal_apply_add'" type="primary" size="mini"
                     @click="showAdd"
          >添加申请
          </el-button>
        </el-col>
      </el-row>

      <el-table v-loading="tabLoading" :data="tableData" size="mini" border :row-class-name="tableRowClassName"
                stripe tooltip-effect="dark"
                style="width: 100%" highlight-current-row
                row-key="id"
      >
        <el-table-column type="index" label="序号" width="50" align="center" fixed="left">
          <template slot-scope="scope">
            <span>{{ (searchForm.page - 1) * searchForm.page_size + scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="applicant_name" label="申请人名称" width="100" align="center" fixed="left"/>
        <el-table-column prop="applicant_dept_name" label="申请人部门名称" width="160" align="center"/>
        <el-table-column prop="company_name" label="所属公司" width="250" align="center"/>
        <el-table-column prop="seal_type_name" label="印章类型" width="160" align="center"/>
        <el-table-column prop="purpose" label="印章用途" min-width="300" header-align="center" align="left"/>
        <el-table-column label="状态" width="120" align="center">
          <template slot-scope="scope">
            <el-tag size="mini" v-if="scope.row.flow_status==3">待审批</el-tag>
            <el-tag size="mini" v-else-if="scope.row.return_time" type="success">已归还</el-tag>
            <el-tag size="mini" v-else-if="new Date()- new Date(scope.row.estimated_return_time)<0">未逾期
            </el-tag>
            <el-tag v-else size="mini" type="danger">
              逾期{{ intervalTime(new Date(scope.row.estimated_return_time), new Date()) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="borrowing_time" label="借用时间" width="200" align="center"/>
        <el-table-column prop="estimated_return_time" label="预计归还时间" width="200" align="center"/>
        <el-table-column prop="return_time" label="实际归还时间" width="200" align="center"/>
        <el-table-column label="操作" width="150" fixed="right" align="center">
          <template slot-scope="scope">
            <el-button v-if="searchForm.is_manage_page && scope.row.return_time==null && scope.row.flow_status == 4"
                       size="mini"
                       @click="sealReturn(scope.row.id)"
            >归还
            </el-button>
            <el-button type="primary" size="mini" @click="look(scope.row.id)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页数据 -->
      <el-pagination :current-page.sync="searchForm.page" :page-sizes="[10, 20, 50, 100, 200, 500]"
                     :page-size.sync="searchForm.page_size"
                     layout="total, sizes, prev, pager, next, jumper" :total="total"
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     style="margin-top: 20px"
      />

    </el-main>
  </div>
</template>

<script>
import { get_seal_type_list, list, seal_return } from '@/api/attendance/sael_out_bring'
import { intervalTime } from '@/utils/date_time'
import SearchFormBox from '@/components/SearchFormBox'
import { get_company } from '@/api/system/department'

export default {
  name: 'SealOutBring',
  components: {
    SearchFormBox
  },
  data() {
    return {
      searchForm: {
        page: 1,
        page_size: 10,
        is_manage_page: this.$route.name != 'my_seal_out_bring',
        company_id: null,
        name: null,
        seal_type_id: null,
        seal_type_name: null,
        borrowing_time_start: null,
        borrowing_time_end: null,
        estimated_return_time_start: null,
        estimated_return_time_end: null,
        return_time_start: null,
        return_time_end: null
      },
      listParams: {
        page: 1,
        page_size: 10,
        is_manage_page: this.$route.name != 'my_seal_out_bring',
        company_id: null,
        name: null,
        seal_type_id: null,
        seal_type_name: null,
        borrowing_time_start: null,
        borrowing_time_end: null,
        estimated_return_time_start: null,
        estimated_return_time_end: null,
        return_time_start: null,
        return_time_end: null
      },
      tableData: [],
      tabLoading: false,
      total: null,
      sealTypeList: [],
      companyArr: []
    }
  },
  created() {
    this.initSealTypeList()
    this.getList()
    this.initCompany()
  },
  methods: {
    search() {
      this.searchForm.page = 1
      this.listParams = Object.assign({}, this.searchForm)
      this.getList()
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
      this.listParams = Object.assign({}, this.searchForm)
      this.getList()
    },
    tableRowClassName({ row }) {
      if (row.return_time == null && row.flow_status == 4) {
        const estimated_return_time = new Date(row.estimated_return_time)
        const now = new Date()
        if (estimated_return_time.getTime() - now.getTime() < 0) {
          return 'warning-row'
        } else {
          return ''
        }
      }
      return ''
    },
    handleSizeChange(val) {
      this.listParams.page_size = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.listParams.page = val
      this.getList()
    },
    initSealTypeList() {
      get_seal_type_list().then(
        res => {
          this.sealTypeList = res.data
        }
      )
    },
    showAdd() {
      this.$router.push({
        name: 'borrow_seal_apply_details',
        params: {
          is_created: true
        }
      })
    },
    look(id) {
      this.$router.push({
        name: 'borrow_seal_apply_details',
        params: {
          look: true,
          id: id
        }
      })
    },
    getList() {
      this.tabLoading = true
      list(this.listParams).then(
        res => {
          this.tabLoading = false
          this.tableData = res.data.records
          this.total = res.data.total
        }
      ).catch(() => {
        this.tabLoading = false
      })
    },
    sealReturn(id) {
      this.$confirm('确认此印章归还了', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const loading = this.$loading({
          lock: true,
          text: '提交中',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        seal_return({ id: id }).then(
          res => {
            if (res.code == 200) {
              this.$message({
                type: 'success',
                message: '操作成功'
              })
              this.getList()
            } else {
              this.$message.error('操作失败')
            }
            loading.close()
          }
        ).catch(
          () => {
            loading.close()
          }
        )
      }).catch(() => {
      })
    },
    /**
     * 计算时间相差天数和小时数
     * @param startTime
     * @param endTime
     * @returns {string}
     */
    intervalTime(startTime, endTime) {
      return intervalTime(startTime, endTime)
    },
    /**
     * 初始化公司数据
     */
    initCompany() {
      get_company().then(
        res => {
          this.companyArr = res.data
        }
      )
    }
  }
}
</script>

<style scoped>
/*.app_main {*/
/*  padding: 0 20px;*/
/*}*/

/*/deep/ .el-form-item {*/
/*  margin-bottom: 0;*/
/*}*/

/*.search_box {*/
/*  margin-top: 10px;*/
/*}*/

/*.data_box {*/
/*  margin-top: 10px;*/
/*}*/

/*.paging_box {*/
/*  margin-top: 20px;*/
/*}*/

/deep/ .el-table .warning-row {
  background: oldlace;
}
</style>
